﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="testMap.css" rel="stylesheet" />
    <script src="http://maps.googleapis.com/maps/api/js?libraries=visualization&sensor=false"></script>
</head>
<body>
    <div id="location">
        <span>Location</span>
        <form>
            <label for="country">Country: </label>
            <input type="text" id="country" value=" " /><br />
            <label for="city">City: </label>
            <input type="text" id="city" value=" " />
        </form>
        <button id="sun" class="button" onclick="displaySolar()"></button>
        <button id="wind" class="button" onclick="displayWind()"></button>
        <button id="geo" class="button"></button>
    </div>
    <div id="map-canvas"></div>
    
    <script>
        var newark = new google.maps.LatLng(20, -50);
        var imageBounds = new google.maps.LatLngBounds(
            new google.maps.LatLng(15.716216, -125.213393),
            new google.maps.LatLng(65, -60));

        var mapOptions = {
            zoom: 2,
            center: newark,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }

        var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

        var oldmap = new google.maps.GroundOverlay(
            "images/map.png",
            imageBounds);
        oldmap.setMap(map);
        
    </script>
</body>
</html>
